<template>

	<view class="menus-box" :style="'top:' + topValue +'px'">
		<view class="item" v-for="(item,index) in list" @click="clickItem(item)">
			<view class="menu-icon">
				<image :src="tabIndex == item.id ? item.iconOnPath : item.iconPath"></image>
			</view>
			<view class="menu-txt" :class="tabIndex == item.id ? 'menu-txt-c' : ''">{{item.title}}</view>
		</view>
	</view>
		
</template>
	
<script >
	import windBtnContrl from "../../js/WinBtnContrl.js";
	import tabBarConntrl from "../../js/TabBarContrl.js";
	import lang from "../../js/conf/Lang.js";
	import accessCtrl from "../../js/limit/AccessCtrl.js";
	import staticConst from "../../js/const/StaticConst.js";
	import cmd from "../../js/Cmd.js";
	import goPage from "../../js/GoPage.js";
	export default{
		props:{
			tabIndex:
			{
				type: Number,
				required: true
			},
		},
		data(){
			return{
				
				// type:"xs",
				// id : staticConst.MD_GD,
				// title : lang.goodsTxt.titleTxt,//"产品",
				// icon:"icon-shangpin",
				// iconOnPath:"/static/images/menuOn01.png",
				// iconPath:"/static/images/menu01.png",
				// path:"/pages/goods/index",
				// access : accessCtrl.getSaleLimit() && accessCtrl.getGoodsLimit(),
				type : "",
				listXs:[
					{
						type : staticConst.ORDER_XS,
						id : staticConst.MD_GD,
						title : lang.goodsTxt.titleTxt,//"产品",
						iconOnPath:"/static/images/menuOn01.png",
						iconPath:"/static/images/menu01.png",
						path:"/pages/goods/index",
						access : accessCtrl.getSaleLimit() && accessCtrl.getGoodsLimit(),
					},
					{
						type : staticConst.ORDER_XS,
						id : staticConst.MD_KH,
						title : lang.customerTxt.titleTxt,//"客户",
						iconOnPath:"/static/images/menuOn02.png",
						iconPath:"/static/images/menu02.png",
						path:"/pages/customer/index",
						access : accessCtrl.getLimitSeeCustomer(),
					},
					{
						type : staticConst.ORDER_XS,
						id : staticConst.MD_KD,
						title : lang.receiptTxt.titleTxt,
						iconOnPath:"/static/images/menuOn03.png",
						iconPath:"/static/images/menu03.png",
						path:"/pages/receipt/index",
						access : accessCtrl.getSaleLimit() && accessCtrl.getBillLimit(),
					},
					{
						type : staticConst.ORDER_XS,
						id : staticConst.MD_DJ,
						title : lang.billTxt.titleTxt,
						iconOnPath:"/static/images/menuOn04.png",
						iconPath:"/static/images/menu04.png",
						path:"/pages/index/index",
						access : accessCtrl.getSaleLimit(),
					}
				],
				
				listCg:[
					{
						type : staticConst.ORDER_CG,
						id : staticConst.CG_KD,
						title : lang.receiptTxt.titleTxt,//"产品",
						iconOnPath:"/static/images/menuOn03.png",
						iconPath:"/static/images/menu03.png",
						path:"/pages/receipt/index",
						access : accessCtrl.getSaleLimit() && accessCtrl.getGoodsLimit(),
					},
					{
						type : staticConst.ORDER_CG,
						id : staticConst.CG_DJ,
						title : lang.billTxt.titleTxt,
						iconOnPath:"/static/images/menuOn04.png",
						iconPath:"/static/images/menu04.png",
						path:"/pages/index/index",
						access : accessCtrl.getLimitSeeCustomer(),
					},
				],
				list:[],
				topValue:80,
			}
		},
		created()
		{
		},
		methods:{
			initData(type)
			{
				this.type = type;
				if(type == staticConst.ORDER_XS)
				{
					this.topValue = 80;
					this.list = this.listXs;
				}
				else if(type == staticConst.ORDER_CG)
				{
					this.topValue = 150;
					this.list = this.listCg;
				}
			},
			
			clickItem(item)
			{
				if(item.id == this.curId)return;
				this.curId = item.id;
				// this.$emit("goPage",item);
				this.goPath(item);
			},
			
			goPath(item)
			{
				// this.$emit("openFunMenu",item.type);
				// if(this.tabIndex == item.id) return;
				cmd.external(cmd.CMD_SHOW_MORE,false);
				goPage.goNavTo(item.path);
			},
			
			/****开单****/
			bill()
			{
				let item = this.tabBarList[2];
				this.goPath(item);
			},
			
			/*****产品*****/
			goods()
			{
				let item = this.tabBarList[0];
				this.goPath(item);
			},
			
			/****添加新的客户****/
			addNewCustom()
			{
				let item = this.tabBarList[1];
				this.goPath(item);
			}
		}
	}
</script>

<style lang="scss">
	.menus-box
	{
	    position: absolute;
		// bottom: 20px;
		left: 72px;
		width: 100px;
		background: #292F4C;
		padding: 5px;
		color: #6D7184;
		.item
		{
			display: flex;
			width: 100%;
			cursor: pointer;
			.menu-icon
			{
				width: 20px;
				height: 20px;
				margin: 4px;
				image
				{
					width: 100%;
					height: 100%;
				}
			}
			.menu-txt
			{
				margin: 4px;
			}
			.menu-txt-c
			{
				color: #3388ff;
			}
		}
		.item:hover {
			background:#F8F8F8;
		}
	}
</style>
